<template>
	<view class="container">
		
		<!-- 微信提醒区域 -->
		<view class="wechat-reminder">
			<view class="reminder-content">
				<view class="reminder-header">
					<uni-icons type="notification" size="20" color="#1989fa"></uni-icons>
					<text class="reminder-title">开启微信端评论提醒</text>
				</view>
				<text class="reminder-text">关注公众号"逛逛校园圈"</text>
				<text class="reminder-text">实时通知帖子评论和评论回复</text>
				<button class="follow-btn" type="primary" size="mini">点我关注</button>
			</view>
		</view>

		<!-- 一键置为已读 -->
		<view class="message-header">
			<text class="message-title">消息列表</text>
			<button class="read-all-btn" type="default" size="mini" @click="markAllAsRead">一键置为已读</button>
		</view>

		<!-- 消息列表 -->
		<scroll-view class="message-list" scroll-y>
			<!-- 无消息提示 -->
			<view class="empty-message" v-if="messages.length === 0">
				<image class="empty-icon" src="https://pic3.zhimg.com/v2-6b3f9b3e3c3c9e3b3e3c3c9e3b3e3c3_l.jpg"
					mode="aspectFit"></image>
				<text class="empty-text">还没有收到消息</text>
				<text class="empty-hint">快和其他同学互动，pick 消息吧~</text>
			</view>

			<!-- 消息卡片列表 -->
			<view v-for="(message, index) in messages" :key="message.id" class="message-card" :style="{
          transform: `rotateY(${index % 2 === 0 ? '5deg' : '-5deg'})`,
          zIndex: messages.length - index
        }" @click="viewMessageDetail(message)">
				<view class="message-card-header">
					<image class="avatar" :src="message.avatar" mode="aspectFill"></image>
					<view class="message-info">
						<text class="sender">{{ message.sender }}</text>
						<text class="time">{{ message.time }}</text>
					</view>
					<uni-icons v-if="!message.read" type="circle" size="16" color="#1989fa"></uni-icons>
				</view>
				<view class="message-content">
					<text class="content-text">{{ message.content }}</text>
				</view>
				<view class="message-source" v-if="message.source">
					<text class="source-text">来自: {{ message.source }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部导航栏 -->
		<TabBar />

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 模拟数据
	const mockMessages = [{
			id: 1,
			avatar: '/static/avatar/1.jpg',
			sender: '校园小助手',
			time: '2025-07-10 10:30',
			content: '你的帖子"求推荐校园周边美食"收到了3条新评论',
			source: '美食推荐',
			read: false
		},
		{
			id: 2,
			avatar: '/static/avatar/2.jpg',
			sender: '同学A',
			time: '2025-07-09 18:45',
			content: '你好，关于你发布的代取快递需求，我可以帮忙',
			source: '互助广场',
			read: true
		},
		{
			id: 3,
			avatar: '/static/avatar/3.jpg',
			sender: '系统通知',
			time: '2025-07-08 09:15',
			content: '你的账号已通过实名认证，现在可以发布更多内容了',
			read: false
		}
	]

	const mockHotList = [
		'校园周边新开了一家奶茶店，同学们快去打卡',
		'求代课：周三上午三四节计算机课程',
		'图书馆自习室新增了充电插座',
		'校园跑腿互助需求激增，快来参与',
		'毕业季二手交易市场火热进行中'
	]

	// 响应式数据
	const messages = ref([...mockMessages])
	const hotList = ref(mockHotList)
	const currentTab = ref(3) // 默认选中消息tab

	const tabBar = ref([{
			icon: 'home',
			text: '首页'
		},
		{
			icon: 'help',
			text: '互助'
		},
		{
			icon: 'compose',
			text: '发帖'
		},
		{
			icon: 'chat',
			text: '消息'
		},
		{
			icon: 'person',
			text: '我的'
		}
	])

	// 方法
	const markAllAsRead = () => {
		messages.value = messages.value.map(msg => ({
			...msg,
			read: true
		}))
		uni.showToast({
			title: '已全部标记为已读',
			icon: 'success'
		})
	}

	const viewMessageDetail = (message) => {
		// 标记为已读
		messages.value = messages.value.map(msg =>
			msg.id === message.id ? {
				...msg,
				read: true
			} : msg
		)

		uni.navigateTo({
			url: `/pages/message/detail?id=${message.id}`
		})
	}

	const switchTabBar = (index) => {
		currentTab.value = index
		if (index !== 3) {
			uni.switchTab({
				url: `/pages/${tabBar.value[index].text}/index`
			})
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
		position: relative;

		// 微信提醒区域
		.wechat-reminder {
			background-color: #fff;
			padding: 24rpx;
			margin: 20rpx;
			border-radius: 16rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

			.reminder-content {
				border: 4rpx solid #007aff;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				border-radius: 16rpx;

				.reminder-header {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;

					.reminder-title {
						font-size: 28rpx;
						font-weight: bold;
						margin-left: 12rpx;
						color: #333;
					}
				}

				.reminder-text {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 8rpx;
				}

				.follow-btn {
					margin-top: 16rpx;
					width: 180rpx;
					align-self: flex-start;
				}
			}
		}

		// 一键置为已读
		.message-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 24rpx;
			background-color: #fff;
			margin: 15rpx 25rpx;
			border-radius: 20rpx;

			.message-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.read-all-btn {
				margin-right: 30rpx;
				font-size: 24rpx;
				background-color: #999;
				color: #fff;
			}
		}

		// 消息列表
		.message-list {
			flex: 1;
			padding: 0 20rpx;
			overflow: hidden;
			width: 710rpx;

			.empty-message {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 80rpx 0;

				.empty-icon {
					width: 160rpx;
					height: 160rpx;
					margin-bottom: 24rpx;
					opacity: 0.6;
				}

				.empty-text {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 12rpx;
				}

				.empty-hint {
					font-size: 24rpx;
					color: #999;
				}
			}

			.message-card {
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				padding: 24rpx;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
				transition: all 0.3s ease;
				perspective: 1000px;
				transform-style: preserve-3d;

				&:active {
					transform: scale(0.98) rotateY(0deg);
				}

				.message-card-header {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.avatar {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					.message-info {
						flex: 1;
						display: flex;
						flex-direction: column;

						.sender {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 4rpx;
						}

						.time {
							font-size: 22rpx;
							color: #999;
						}
					}
				}

				.message-content {
					margin-bottom: 16rpx;

					.content-text {
						font-size: 26rpx;
						color: #666;
						line-height: 1.6;
					}
				}

				.message-source {
					.source-text {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}


	}
</style>